<script setup lang="ts">
import type { NavItem } from './types'
import NavBarDropDown from './NavBarDropDown.vue'

withDefaults(
  defineProps<{
    items: NavItem[]
  }>(),
  { items: () => [] }
)
</script>
<template>
  <nav class="navbar">
    <div class="navbar-menu">
      <template v-for="(item, idx) in items">
        <a v-if="!item.children" :key="`nv-a-${idx}`" class="navbar-item" @click="item.onClick?.()">
          <i v-if="item.icon" :class="item.icon" />
          {{ item.name }}
        </a>
        <div v-else :key="`nv-d-${idx}`" class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            <i v-if="item.icon" :class="item.icon" />
            {{ item.name }}
          </a>
          <NavBarDropDown :items="item.children" />
        </div>
      </template>
    </div>
  </nav>
</template>
